<template>
  <el-container>
    <el-main>
      <!-- 表格  -->
      <vxe-grid
        ref="mainTable"
        column-key
        context-menu
        v-grid-drag-col
        :height="$store.getters.scrollerHeight()"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :data="tableData"
        :export-config="{filename:'编码规则',sheetName:'编码规则'}"
      >
        <!-- 快速查询 -->
        <template v-slot:toolbar_search>
          <rayd-quick-query v-model="filterName" @query="query"></rayd-quick-query>
        </template>
        <!-- 业务按钮 -->
        <template v-slot:toolbar_buttons>
          <el-button round type="primary" icon="el-icon-plus" @click="handleAdd" v-permission-btn="'Add'">新增</el-button>
          <el-button round type="warning" icon="el-icon-edit" @click="handleEdit" v-permission-btn="'Edit'">编辑</el-button>
          <el-button round type="danger" icon="el-icon-delete" @click="handleDelete" v-permission-btn="'Delete'">删除</el-button>
          <el-divider direction="vertical"></el-divider>
        </template>
      </vxe-grid>
    </el-main>
    <!-- 拟态窗口 -->
    <Form ref="mainForm" @refresh="query()" />
  </el-container>
</template>

<script>
import { CodeRule } from "@/api";
import Form from "./Form.vue";
export default {
  components: { Form },
  data() {
    return {
      /* vxe-grid */
      filterName: "", //查询实体
      tableData: [], //表格实体
      tableToolbar: {
        export: true,
        refresh: { 
          query : ()=> {
            this.filterName = ''; //清空条件
            this.query();
          }
        },
        zoom: true,
        custom: true,
      },
      tableColumn: [
        {
          type: "seq",
          title: "序号",
          fixed: "left",
          align: "left",
          width: 80,
        },
        { type: "html", field: "B_EnCode", title: "编号", sortable: true },
        { type: "html", field: "B_Name", title: "名称", sortable: true },
        {
          type: "html",
          field: "B_NextNumber",
          title: "下一流水号",
          sortable: true,
        },
        {
          type: "html",
          field: "B_CreateUserName",
          title: "创建用户",
          sortable: true,
        },
        {
          type: "html",
          field: "B_CreateDate",
          title: "创建时间",
          formatter: ["toDateString", "yyyy-MM-dd"],
          sortable: true,
        },
        { type: "html", field: "B_Description", title: "说明", sortable: true },
      ],
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.$store.commit("SET_ISLOADING",true);
      /* 初始化数据源 */
      Promise.all([]).then(() => {
        this.query()
      });
    },
    //列表数据
    query() {
      this.$store.commit("SET_ISLOADING",true);
      return CodeRule.GetList({queryjson:JSON.stringify({QueryInfo:this.filterName})}).then((res) => {
        this.tableData = res;
        this.$store.commit("SET_ISLOADING",false);
      });
    },
    //新增
    handleAdd() {
      this.$refs["mainForm"].formOpen();
    },
    //编辑
    handleEdit() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$refs["mainForm"].formOpen(row);
      }else{
        this.$message.warning("请选择数据行！");
      }
    },
    //删除
    handleDelete() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$confirm("确认永久删除该行数据?", "提示", { type: "warning" })
          .then(() => {
            CodeRule.Delete(row).then((res) => {
              this.query(); // 刷新表格
            });
          })
          .catch((e) => {});
      }else{
        this.$message.warning("请选择数据行！");
      }
    },
  },

};
</script>
